<!-- 日记列表 -->
<template>
    <div class="diary-list">
        <nut-navbar>
            <span>我的日记</span>
            <a slot="back-icon" @click="goBack">返回</a>
            <a slot="more-icon" @click="goToAdd">写日记</a>
        </nut-navbar>
        <div class="no-data" v-if="tableData.length === 0">
            暂无日记
        </div>
        <div class="has-data" v-else>
            <nut-leftslip :rightWidth="0.6" class="diary_item" v-for="item in tableData" :key="item.id">
                <div slot="slip-main" class="slip-main">{{ item.title.length > 20 ? item.title.slice(0, 20) + '...' : item.title }}</div>
                <div slot="slipbtns" class="slipbtns">
                    <a href="javascript:;" class="edit" @click="handleEdit(item.id)">修改</a>
                    <a href="javascript:;" class="detail" @click="handleDetail(item.id)">查看</a>
                    <a href="javascript:;" @click="handleDelete(item.id)">删除</a>
                </div>
            </nut-leftslip>
        </div>
    </div>
</template>

<script>

import { API_GetMyDiary, API_DeleteDiary } from "@/api/diary"

export default {
    data() {
        return {
            tableData: []
        }
    },
    created() {
        this.getTableData()
    },
    mounted() {

    },
    computed: {

    },
    methods: {
        // 返回
        goBack() {
            this.$router.back()
        },
        // 去写日记
        goToAdd() {
            this.$router.push('/diary/add')
        },
        // 获取列表
        getTableData() {
            const submitData = {
                date: this.$route.query.date
            }
            API_GetMyDiary(submitData).then(res => {
                if(res.data.code === 0) {
                    this.tableData = res.data.result;
                }
            })
        },
        // 删除日记
        handleDelete(diary_id) {
            const _this = this;
            this.$dialog({
                title: "注意",
                content: "确定删除这则日记吗？",
                closeBtn:true, 
                onOkBtn(event) {  //确定按钮点击事件
                    API_DeleteDiary({diary_id}).then(res => {
                        if(res.data.code === 0) {
                            this.close(); //关闭对话框
                            this.$toast.success('删除成功');
                            _this.getTableData();
                        }
                    })
                },
            });
        },
        // 修改日记
        handleEdit(diaryId) {
            this.$router.push({
                path: '/diary/edit',
                query: {
                    diaryId
                }
            })
        },
        // 查看日记详情
        handleDetail(diaryId) {
            this.$router.push({
                path: '/diary/detail',
                query: {
                    diaryId
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>

    @import "~@/assets/style/helper.scss";

    .diary-list {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .no-data {
            width: 100%;
            text-align: center;
            color: $color-highlight;
            position: absolute;
            top: 45%;
        }
        .has-data {
            width: 100%;
            position: absolute;
            overflow: auto;
            top: 40px;
            bottom: 0;
        }
        .diary_item {
            .slip-main {
                background: #FFFAF0;
                border-bottom: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
            }
            .slipbtns {
                a.edit {
                    background: #abb5dc;
                }
                a.detail {
                    background: #686976;
                }
            }
        }
    }
</style>